<template>
  <div class="page_root" id="root_demo">
    <div class="warp">
      <div class="container">
        <div class="row">
          <div class="col">
            <div class="card_ad">
              <!-- 店招 -->
              <list_ad :list="list_ad" location="店招"></list_ad>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="warp">
      <div class="container">
        <div class="row">
          <div class="col-12" id="swiper">
            <!-- 轮播图组件 -->
            <swiper_img :list="list_slide"></swiper_img>
          </div>
        </div>
      </div>
    </div>

    <div class="warp mt-2">
      <div class="container">
        <div class="row">
          <div class="col-12" id="swiper">
            <div class="card_notice">
              <!-- 公告组件 -->
              <swiper_notice :list="list_notice"></swiper_notice>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="warp">
      <div class="container">
        <div class="row">
          <div class="col">
            <div class="card_ad">
              <!-- 顶部广告 -->
              <list_ad :list="list_ad" location="顶部广告"></list_ad>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="warp">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <bar_title class="mt" url="/goods/list" title="商品推荐"></bar_title>
            <!-- 商品推荐列表组件 -->
            <list_goods v-if="$check_action('/goods/list', 'get')" :list="list_goods"></list_goods>
          </div>
        </div>
      </div>
    </div>

    <div class="warp">
      <div class="container">
        <div class="row">
          <div class="col">
            <div class="card_ad">
              <!-- 中部广告 -->
              <list_ad :list="list_ad" location="中部广告"></list_ad>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="warp">
      <!-- 容器 -->
      <div class="container">
        <div class="row">
          <div class="col-12">
            <!-- 标题栏组件 -->
            <bar_title class="mt" url="/article/list" title="文章推荐"></bar_title>
            <!-- 文章推荐列表组件 -->
            <list_article :list="list_article"></list_article>
          </div>
        </div>
      </div>
    </div>


    <div class="warp">
      <div class="container">
        <div class="row">
          <div class="col">
            <div class="card_ad">
              <!-- 底部广告 -->
              <list_ad :list="list_ad" location="底部广告"></list_ad>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import mixin from "../mixins/page.js";
  import bar_title from "../components/diy/bar_title.vue";
  import list_goods from "../components/diy/list_goods.vue";
  import list_article from "../components/diy/list_article.vue";
  import swiper_img from "../components/diy/swiper_img.vue";
  import list_ad from "../components/diy/list_ad.vue";
  import swiper_notice from "../components/diy/swiper_notice.vue";
  export default {
    mixins: [mixin],
    components: {
      bar_title,
      list_goods,
      list_article,
      swiper_img,
      swiper_notice,
      list_ad,
    },
    data() {
      return {
        list_ad: [],
        str: "<div>测试一下</div>",
        list_goods: [],
        list_slide: [],
        list_article: [],
        list_menu: [],
        list_link: [],
        list_notice: [],
        list_ad: [],
      };
    },
    methods: {
      // 获取轮播图
      get_slides() {
        this.$get("~/api/slides/get_list?", {}, (json) => {
          if (json.result) {
            this.list_slide = json.result.list;
          }
        });
      },
      // 获取导航栏
      get_menu() {
        this.$get("~/api/nav/get_list?", {
          page: 1,
          size: 1
        }, (json) => {
          if (json.result) {
            this.list_menu = json.result.list;
          }
        });
      },
      // 获取文章
      get_article() {
        this.$get("~/api/article/get_list?", {
          page: 1,
          size: 5
        }, (json) => {
          if (json.result) {
            var list_article = json.result.list;
            this.list_article = list_article;
          }
        });
      },
      // 获取广告
      get_ad() {
        this.$get("~/api/ad/get_list?", {
          page: 1,
          size: 5
        }, (json) => {
          if (json.result) {
            var list_ad = json.result.list;
            this.list_ad = list_ad;
          }
        });
      },
      // 获取商品
      get_goods() {
        this.$get("~/api/goods/get_list?", {
          page: 1,
          size: 5
        }, (json) => {
          if (json.result) {
            var list_goods = json.result.list;
            this.list_goods = list_goods;
          }
        });
      },
      // 获取链接列表
      get_link() {
        this.$get("~/api/link/get_list?", {
          page: 1,
          size: 3
        }, (json) => {
          if (json.result) {
            var list_link = json.result.list;
            this.list_link = list_link;
          }
        });
      },
      // 获取公告列表
      get_notice() {
        this.$get("~/api/notice/get_list?", {
          page: 1,
          size: 3
        }, (json) => {
          if (json.result) {
            var list_notice = json.result.list;
            this.list_notice = list_notice;
          }
        });
      },
    },
    mounted() {
      this.get_menu();
      this.get_slides();
      this.get_article();
      this.get_goods();
      this.get_link();
      this.get_notice();
      this.get_ad();
    },
  };
</script>

<style scoped>
  .page_index {
    margin: 0 auto;
    max-width: 1200px;
  }

  .main {
    display: flex;
    justify-content: space-between;
  }

  .content {
    flex: 0 0 79%;
  }

  .aside {
    flex: 0 0 20%;
  }

  .card_ad {
    padding: 5px 0;
  }
</style>
